<template>
	<div class="chat-message-container">
		<div class="agent-box" v-if="type === 'agent'">
			<Avatar v-if="isRobot" :src="robot_avatar" size="large" />
			<Avatar v-else :src="agent_avatar" size="large" />
			<div class="agent-text">
				<p class="agent-name"> 坐席{{ name }} </p>
				<div @click="downFile(message)" class="text" :class="'chatMessageText' + index" ref="chatMessage">
					<img class="img" v-if="message.type === 'pic'" :src="message.url" alt="" />
					<span class="link" v-if="message.type === 'file'"> {{ message.name }} </span>
					<span class="link" v-if="msgType === 'view'"> {{ message.url }} </span>
					<span class="cmd" v-if="message.contents"> {{ message.contents }} </span>
					<a class="cmd" v-if="message.type === 'richtext'" style="text-decoration:underline;"> 推送富文本 </a>
				</div>
			</div>
			<span v-if="msgType === 'view' || message.contents" class="buiness"><i>指令消息</i></span>
		</div>
		<div class="customer-box" v-if="type === 'customer'">
			<Avatar :src="getCustomerAvatar" size="large" />
			<div class="customer-text">
				<p class="customer-name"> {{ name }} </p>
				<div @click="downFile(message)" class="text" :class="'chatMessageText' + index" ref="chatMessage">
					<img class="img" v-if="message.type === 'pic'" :src="message.url" alt="" />
					<span class="link" v-if="message.type === 'file'"> {{ message.name }} </span>
					<span class="link" v-if="msgType === 'view'"> {{ message.url }} </span>
					<span class="cmd" v-if="message.contents"> {{ message.contents }} </span>
				</div>
			</div>
			<span v-if="msgType === 'view' || message.contents || message.status === 'done'" class="buiness"><i>指令消息</i></span>
		</div>
		<div class="iframe-box" v-if="showPrevUrl">
			<RemoteLink ref="remoteLink" :remotelinkurl="prevUrl" :isPdf="isPdf" style="height:100%;" :loading="loading" @closeremotelink="closeremotelink"></RemoteLink>
		</div>
	</div>
</template>

<script>
import _ from 'lodash';
import { mapMutations, mapState } from 'vuex';
import axios from 'axios';
import RemoteLink from '../components/RemoteLink.vue';
export default {
	name: 'chatMessage',
	data() {
		return {
			id: undefined,
			textarea: '',
			customer_avatar: require('../../static/image/customer_avatar.png'),
			robot_avatar: require('../../static/image/robot_avatar.png'),
			agent_avatar: require('../../static/image/agent_avatar.png'),
			prevUrl: '',
			showPrevUrl: false,
			isPdf: false,
			loading: false
		};
	},
	components: { RemoteLink },
	props: ['message', 'index', 'msgType', 'name', 'type', 'isRobot'],
	mounted() {
		const className = 'chatMessageText' + this.index;
		/* eslint-disable */
		const lastClass = $('.chatMessageText').length - 1;
		if (this.msgType === 'text') {
			$('.' + className).append(this.message);
		}

		/* eslint-enable */
		// div.append('<img src="../../static/images/editor/emotion/qq/12.gif"> ');
		console.log(this.agent, this.customer);
	},
	computed: {
		...mapState({
			agent: state => state.user.agent,
			customer: state => state.user.customer
		}),
		getCustomerAvatar() {
			return this.customer.avatar ? this.customer.avatar : this.customer_avatar;
		},
		getAgentAvatar() {
			return this.agent.isRobot ? this.robot_avatar : this.agent_avatar;
		}
	},
	methods: {
		...mapMutations('message', ['SET_RICH_TEXT']),
		showFullImg() {
			if (this.msgType !== 'link' && this.msgType !== 'get-handwriting' && this.msgType !== 'get-screenshot') return;
			const src = this.message.url;
			if (this.message.type === 'pic') {
				this.$parent.showFullImg(src);
			}
		},
		downFile(item) {
			if (item.type !== 'file' && item.type !== 'pic' && item.type !== 'richtext') {
				return;
			}
			if (item.suffix !== 'rar' && item.suffix !== 'zip' && item.suffix !== 'docx' && item.suffix !== 'xlsx' && item.suffix !== 'pptx' && item.type === 'file') {
				console.log(item);
				if (item.suffix === 'pdf') {
					this.isPdf = true;
					let url = escape(loginUrl + '/ivcs/api/v1/file/stream' + '?url=' + item.url);
					this.prevUrl = 'static/pdf/web/viewer.html?file=' + url;
					this.showPrevUrl = true;
				} else {
					this.prevUrl = _.replace(item.url, 'http', 'https').replace('zco-fileupload.oss-cn-shanghai.aliyuncs.com', 'zco-fileupload.zealcomm.cn');
					this.showPrevUrl = true;
				}
				return;
			}
			if (item.type === 'pic') {
				this.$parent.showFullImg(item.url);
				return;
			}
			if (item.type === 'richtext') {
				this.$store.commit('SET_RICH_TEXT', item.content);
				return;
			}
			axios({
				method: 'get',
				url: _.replace(item.url, 'http', 'https'),
				headers: {
					'Content-Type': 'application/octet-stream'
				},
				responseType: 'blob'
			}).then(res => {
				const content = res.data;
				let href = URL.createObjectURL(content);
				let downFile = document.createElement('a');
				downFile.style.display = 'none';
				downFile.href = href;
				this.showPrevUrl = true;
				this.loading = true;
				downFile.download = item.name; // 下载后文件名
				document.body.appendChild(downFile);
				downFile.click();
				window.URL.revokeObjectURL(href);
				let fileName = this.replaceFileName(item);
				setTimeout(() => {
					if (res.data.size === item.size) {
						this.showPrevUrl = false;
						this.loading = false;
						this.$Message.success(`&lt;${fileName}&gt;下载成功`);
					}
				}, 1000);
			});
		},
		closeremotelink() {
			this.prevUrl = '';
			this.showPrevUrl = false;
		},
		//切割文件名已显示省略号
		replaceFileName(file) {
			let index = file.name.indexOf('.');
			let replaceName = file.name.substring(0, index);
			if (replaceName.length > 6) {
				let first = replaceName.substring(0, 4);
				let last = replaceName.substring(replaceName.length, replaceName.length - 1);
				return first + '...' + last + '.' + file.suffix;
			} else {
				return file.name;
			}
		}
	}
};
</script>

<style scoped lang="less">
.chat-message-container {
	.customer-box {
		width: 100%;
		display: flex;
		flex-flow: row-reverse;
		.buiness {
			i {
				font-style: normal;
				position: absolute;
				bottom: 0px;
				left: 0;
			}
		}
	}
	.agent-box {
		width: 100%;
		display: flex;
		.buiness {
			i {
				font-style: normal;
				position: absolute;
				bottom: 0px;
			}
		}
	}
	.agent-name {
		padding: 0 10px;
		color: #333;
	}
	.customer-name {
		padding: 0 10px;
		color: #333;
	}
	.customer-text {
		// padding-left: 20px;
	}
	.img {
		width: 50px;
	}
	.buiness {
		color: #999;
		font-size: 12px;
		position: relative;
		padding: 0 12px;
		display: inline-block;
		min-width: 60px;
	}
	.iframe-box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100%;
	}
	.pdffile {
		width: 100%;
		/*height:600px;*/
		position: absolute;
		left: 0;
		top: 0px;
		z-index: 7;
		.closeimg {
			width: 30px;
			height: 30px;
			position: absolute;
			right: 10px;
			top: 50px;
			z-index: 8;
		}
	}
}
</style>

<style lang="less">
.chat-message-container {
	.ivu-avatar-large {
		min-width: 50px;
		min-height: 50px;
		line-height: 50px;
		border-radius: 50%;
	}
}
</style>
